{% extends 'base.html' %}
{% block body %}
    <div class="instance">
        <div class="basicstats">
            <h2>{{project.name}}</h2>
            <dl>
                <dt>Tickets</dt>
                <dd>{{project.num_tickets}}</dd>
                <dt>Contributors</dt>
                {% for committer in project.committers %}
                    <a class="committer" title="{{committer.name}}" href="/people/{{committer.key}}/">
                        <img width="40" height="40" title="{{committer.name}}" src="{{committer.gravatar}}">
                    </a>
                {% endfor %}
            </dl>            
        </div>
        <div class="backlog">
            <script src="/data/backlog/{{project.name}}/" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript+protovis">
                var classes = pv.nodes(backlog);
                classes.slice(1).forEach(function(d){
                    $.extend(d, d.nodeValue);
                    d.estimated_time = parseInt(d.estimated_time)
                    if(!d.estimated_time/1){
                        d.estimated_time = 1;
                    }
                    d.nodeValue = d.estimated_time;
                    if(d.category == 'None'){
                        d.category = 'Misc'
                    }
                });

                /* For pretty number formatting. */
                var format = pv.Format.number();

                var vis = new pv.Panel()
                    .width(320)
                    .height(300)        
                vis.add(pv.Layout.Pack)
                    .nodes(classes)
                    .size(function(d) d.estimated_time)
                    .spacing(0)
                    .order(null)
                  .node.add(pv.Dot)
                    .fillStyle(pv.Colors.category20().by(function(d) d.category))
                    .strokeStyle(function() this.fillStyle().darker())
                    .visible(function(d) d.parentNode)
                    .title(function(d) d.category + ": " + d.summary)
                  .anchor("center").add(pv.Label)
                    .text(function(d) d.estimated_time);

                vis.render();

            </script>            
        </div>
        <br style="clear:both;">
        {% if project.milestones %}
        <ul class="milestones">
            <h3>Milestones</h3>
            {% for milestone in project.milestones %}
                {% if milestone.time_left %}
                <li>
                    <h4>{{milestone.name}}
                        <span class="edit"><a href="/milestones/edit/{{milestone.key}}/">edit</a>
                        |
                        <a class="delete" href="/milestones/delete/{{milestone.key}}/">delete</a></span>
                    </h4>
                    <dl>
                        <dt>due</dt>
                        <dd>{{milestone.due}} - {{milestone.days_away}} days away</dd>
                        <dt>tickets</dt>
                        <dd>
                            <a href="http://code.google.com/p/{{project.name}}/issues/list?can=1&q={{milestone.q}}">
                                {{milestone.tickets.count}}
                            </a>
                        </dd>
                        <dt>total estimated time</dt>
                        <dd>{{milestone.total_time}} hours</dd>
                        <dt>estimated time left</dt>
                        <dd>{{milestone.time_left}} hours</dd>
                    </dl>
                </li>                    
                {% endif %}
            {% empty %}
            <p>No milestones specified for this project.</p>
            {% endfor %}
        </ul>
        {% endif %}
        <a href="/milestones/create/?project={{project.key}}">add a milestone</a>
        <h3>Subprojects</h3>
        <p>Subprojects are identified with similar <code class="label">Category-</code> labels.</p>
        <div class="subprojects">
            <h4>In Progress</h4>
            <ul>
                {% for category in in_progress %}
                    <li>
                        <a href="/categories/{{category.key}}/">{{category.name}}</a>
                        {% if category.total_hours %}
                            {{category.completed_hours}}/{{category.total_hours}} hours completed
                        {% endif %}
                    </li>
                {% empty %}
                <p>No categories in progress.</p>
                {% endfor %}            
            </ul>
            <h4>Not Started</h4>
            <ul>
                {% for category in waiting %}
                    <li>
                        <a href="/categories/{{category.key}}/">{{category.name}}</a>
                        {% if category.total_hours %}
                            {{category.completed_hours}}/{{category.total_hours}} hours completed
                        {% endif %}
                    </li>
                {% empty %}
                <p>No categories that are incomplete.</p>
                {% endfor %}            
            </ul>
            <h4>Complete</h4>
            <ul>
                {% for category in completed %}
                    <li>
                        <a href="/categories/{{category.key}}/">{{category.name}}</a>
                        {% if category.total_hours %}
                            {{category.completed_hours}}/{{category.total_hours}} hours completed
                        {% endif %}
                    </li>
                {% empty %}
                <p>No completed categories found.</p>
                {% endfor %}            
            </ul>            
        </div>
    </div>
    <ul class="actions">
        <li><a href="/projects/edit/{{project.key}}/">edit this project</a></li>
        <li><a class="delete" href="/projects/delete/{{project.key}}/">delete this project</a></li>
        <br>
    </ul>        
{% endblock body %}